<template>
  <div class="seat-table">
    <table class="seat">
      <tbody>
        <template v-for="(item, index) in seat">
          <tr :key="index" v-if="item[0][0].name">
            <td v-for="(columnItem, columnIndex) in item" :key="columnIndex">
              <div v-for="(studentItem, studentIndex) in columnItem" :key="studentIndex">{{studentItem.name}}</div>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <div>
      <history-result :student="student" :style="{
        marginTop: '20px'
      }" />
      <div class="outher-chart">
        <radar-chart :student="student" />
        <pie-chart :student="student" />
      </div>
    </div>
  </div>
</template>

<script>
import storage from '@/utils/storage'
export default {
  name: 'seat-table',
  data () {
    return {
      seat: storage.getItem('seat') || [],
      student: '',
      students: (storage.getItem('seat') || []).reduce((prev, item) => {
        item.forEach(col => {
          col.forEach(student => {
            if (student.name) {
              prev.push(student.name)
            }
          })
        })
        return prev
      }, []),
      index: 0
    }
  },
  created () {
    console.log(this.student, '12212112')
    this.student = this.students[0]
    let index = 0
    setInterval(() => {
      index += 1
      if (index >= this.students.length) {
        index = 0
      }
      this.student = this.students[index]
    }, 5000)
  }
}
</script>

<style lang="scss" scoped>
.seat-table {
  width: 100%;
  tbody {
    width: 100%;
    td {
      div {
        display: inline-block;
        font-size: 12px;
        color: #1FC6FF;
        line-height: 30px;
        padding: 0 20px;
        width: 40px;
        border: 1px solid #1FC6FF;
        margin-left: -1px;
        margin-bottom: -1px;
      }
    }
  }
  table {
      width: 100%;
      text-align: center;
      border-spacing: 0;/**设置相邻单元格的边框间的距离**/
      color:#5a5a5a;
      &.seat {
        td:first-child {
          text-align: left;
        }
        td:last-child {
          text-align: right;
        }
      }
  }
  table td,table th{
    white-space: nowrap;/**不换行**/
    text-overflow: ellipsis;/**溢出不可见部分使用...代替**/
}
}

.histiry-achievement {
  margin-top: 20px;
  thead {
    th {
      background: rgba(31, 198, 255, 0.2);
      line-height: 40px;
      font-size: 12px;
      text-align: left;
      padding-left: 10px;
      color: #B4C0CC;
    }
  }
  tbody {
    td {
      line-height: 40px;
      font-size: 12px;
      text-align: left;
      padding-left: 10px;
      color: #fff;
    }
  }
}
.outher-chart {
  display: flex;
  & > div{
    width: 50%;
    flex-shrink: 0;
  }
}
</style>
